/
<template>
  <div>
    <div
      :class="[
        'page-title',
        'align-items-center',
        alignposition == 'center' ? 'justify-content-center' : 'left',
      ]"
    >
      <span v-if="titlebefore" class="titlebefore"></span>
      <div>
        <span>{{ props.title }}</span>
        <span class="danwei">{{
          props.danwei ? "（" + props.danwei + "）" : ""
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  titlebefore: {
    type: Boolean,
    default: true,
  },
  danwei: {
    type: String,
    default: "",
  },
  alignposition: {
    type: String,
    default: "left",
  },
});
</script>
<style scoped lang="scss">
// @import '@/assets/styles/variables.function.scss';

.page-title {
  color: white;
  display: flex;
  align-items: center;
  width: 100%;
  height: flexHeight(60);
  .titlebefore {
    display: block;
    width: 12px;
    height: 12px;
    background: linear-gradient(90deg, #266cd4 0%, #4ae6fb 100%);
    border-radius: 50%;
    opacity: 1;
    margin: 0 10px 0 10px;
    align-items: baseline;
  }
  .danwei {
    font-size: 18px;
    align-items: baseline;
  }
  .font26 {
    font-size: 30px;
  }
  .justify-content-center {
    display: flex;
    justify-content: center;
  }
}
</style>
